<template>
	<div id="detail">
		<detail-nav-bar class="detail-nav"></detail-nav-bar>
		<scroll class="content" ref="scroll">
			<detail-swiper :top-images="topImages"></detail-swiper>
			<detail-base-info :goods="goods"></detail-base-info>
			<detail-shop-info :shop="shop"></detail-shop-info>
			<detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
			<detail-param-info :paramInfo="paramInfo"></detail-param-info>
		</scroll>
	</div>
</template>

<script>
	import DetailNavBar from './childComps/DetailNavBar.vue'
	import DetailSwiper from './childComps/DetailSwiper.vue'
	import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
	import DetailShopInfo from './childComps/DetailShopInfo.vue'
	import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
	import DetailParamInfo from './childComps/DetailParamInfo.vue'
	
	import Scroll from 'components/common/scroll/Scroll.vue'
	
	import { getDetail,Goods,Shop,GoodsParam } from 'network/detail.js'
	
	export default {
		name:'Detail',
		components:{
			DetailNavBar,DetailSwiper,DetailBaseInfo,DetailShopInfo,
			DetailGoodsInfo,DetailParamInfo,Scroll
		},
		data() {
			return {
				iid:null,
				topImages:[],
				goods:{},
				shop:{},
				detailInfo:{},
				paramInfo:{}
			}
		},
		created() {
			//1.保存传入的iid
			this.iid = this.$route.params.iid
			
			//2.根据iid请求详情数据
			getDetail(this.iid).then(res=>{
				const data = res.result
				this.topImages = data.itemInfo.topImages
				this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
				this.shop = new Shop(data.shopInfo)
				this.detailInfo = data.detailInfo
				this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
				console.log(this.paramInfo)
			})
		},
		methods:{
			imageLoad(){
				this.$refs.scroll.refresh()
			}
		},
		mounted() {
			
		}
	}
</script>

<style scoped="scoped">
	#detail {
		position: relative;
		z-index: 9;
		background-color: #fff;
		height: 100vh;
	}
	.detail-nav {
		position: relative;
		z-index: 10;
		background-color: #fff;
	}
	.content {
		height: calc(100% - 44px);
	}
</style>
